<template>
<div id="profit-ability">
  <div class="chart" v-show='status == 0'>
    <div ref="proAbilityChart" style="width:100%;height:300px"></div>
    <div class="buyDis">
      <span>
  					<img src="~@/assets/images/flagBlue2x.png" alt="" />
  				</span>
      <span class="text">本月账户盈亏</span>
      <div class="rateDetail" :class="textColor">
        <span v-text="proData.total_profit_total"></span>元
      </div>
      <div class="evalute bottom">
        <div class="img" style="display: inline-block;">
          <img src="~@/assets/images/trophy2x.png" alt="" />
        </div>
        <div class="des">
          本月，您的收益能力得分为<i v-text='proData.profit_index'></i>分
        </div>
      </div>
      <div class="win">
        有<i v-text='proData.win_hs300_cnt'></i>次成功跑贏沪深300指数
      </div>
      <div class="tSmall">
        <img src="~@/assets/images/star.png">
        <span class="textSmall" v-text='proData.text'></span>
        <img src="~@/assets/images/star.png">
      </div>
    </div>
  </div>
  <return-empty v-if='status == 1'></return-empty>
  <return-error v-if='status == 2'></return-error>
</div>
</template>
<script>
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/grid'
import 'echarts/lib/component/legend'
import RemoteDAO from '@/common/remoteDAO'
import tools from '@/common/tools'
import myPoint from '@/assets/images/myPoint.png'
import shPoint from '@/assets/images/shPoint.png'

let tooltipDate = ['']
const proAbility = {
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(0,0,0,.4)',
    formatter: (params) => {
      return `${tooltipDate[params[0].dataIndex]}<br/>
            <div style="display:inline-block; width:10px; height:10px; border-radius:50%; background:${params[0].color}"></div>&nbsp;
            我的收益率：${params[0].data}%<br/>
            <div style="display:inline-block; width:10px; height:10px; border-radius:50%; background:${params[1].color}"></div>&nbsp;
            沪深300指数收益：${params[1].data}%`
    }
  },
  grid: {
    show: false,
    top: '10%',
    left: '0',
    right: '0',
    bottom: "13%",
    containLabel: true
  },
  legend: {
    data: ['我的收益率', '沪深300指数收益'],
    bottom: 0,
    selectedMode: false,
    textStyle: {
      color: '#999'
    }
  },
  xAxis: {
    show: true,
    axisLine: {
      show: true,
      onZero: false,
      lineStyle: {
        color: '#c9daeb'
      }
    },
    axisLineTick: {
      show: false
    },
    axisLabel: {
      show: false
    },
    splitLine: {
      show: false
    },
    type: 'category',
    boundaryGap: false,
    axisLabel: {
      textStyle: {
        color: '#999'
      }
    },
    axisTick: {
      show: false
    }
  },
  yAxis: {
    show: true,
    axisLine: {
      show: false
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: ['#bac9d8'],
        type: 'dotted'
      }
    },
    splitNumber: 2,
    axisLineTick: {
      show: false
    },
    type: 'value',
    axisLabel: {
      textStyle: {
        color: '#999'
      },
      formatter: '{value}%',
      inside: true
    },
    axisTick: {
      show: false
    }
  },
  series: [{
      name: '我的收益率',
      type: 'line',
      symbol: 'image://' + myPoint,
      symbolSize: 10,
      showSymbol: false,
      itemStyle: {
        normal: {
          color: '#fb8a3f'
        }
      }
    },
    {
      name: '沪深300指数收益',
      type: 'line',
      symbol: 'image://' + shPoint,
      symbolSize: 10,
      showSymbol: false,
      itemStyle: {
        normal: {
          color: '#2EAAFF'
        }
      }
    }
  ]
}

export default {
  props: ['fathertime', 'monthstatus'],
  data() {
    return {
      myProfite: [],
      HSProfite: [],
      tradedate: [],
      proData: {},
      proAbilityCharts: '',
      textColor: '',
      status: 0
    }
  },
  created() {
    this.initProAbility();
  },
  beforDestroy() {
    echarts.dispose(this.proAbilityCharts)
  },
  watch: {
    fathertime: function() {
      this.initProAbility();
    },
    monthstatus: function() {
      this.initProAbility();
    },
  },
  methods: {
    initProAbility() {
      let vm = this;
      if (vm.fathertime) {
        let obj0010 = {
          "recent": vm.fathertime,
        };
        RemoteDAO.callZL13100010(obj0010, vm.ZL13100010);
        let obj0009 = {
          "recent": vm.fathertime,
        }
        RemoteDAO.callZL13100009(obj0009, vm.ZL13100009);
      }
    },
    ZL13100010(result) {
      let vm = this;
      vm.tradedate = [''];
      vm.myProfite = [0];
      if (result.error == '1') {
        vm.status = 2;
        return;
      } else {
        let data = result.data;
        let bigdata = JSON.parse(data).body[0].bigdata;
        let specData = JSON.parse(bigdata).hits.hits;
        specData.length == 0 ? vm.status = 1 : vm.myProfiteData(specData)
      };
    },
    myProfiteData(specData) {
      let vm = this;
      tooltipDate = ['']
      specData.forEach(function(item, i) {
        tooltipDate.push(String(item._source.tradedate))
        let tDate = String(item._source.tradedate).slice(4, 6) + '.' + String(item._source.tradedate).slice(6, 8)

        vm.tradedate.push(tDate)
        let profit = parseFloat((item._source.total_profit_rate_total * 100).toFixed(2))
        vm.myProfite.push(profit)
      });

      vm.tradedate = vm.xDataExpand(vm.tradedate)
      vm.tradedate.push('')
      let obj0011 = {
        "recent": vm.fathertime,
      }
      RemoteDAO.callZL13100011(obj0011, vm.ZL13100011);
    },
    xDataExpand(dateArr) {
      const threshHold = 15
      if (dateArr.length > threshHold) {
        return dateArr
      }

      let count = dateArr.length;

      let month = Number(dateArr[dateArr.length - 1].slice(0, 2));
      let date = Number(dateArr[dateArr.length - 1].slice(3, 6))
      let now = new Date(2017, month - 1, date);
      now.setDate(now.getDate() + 1);
      while (count < threshHold) {
        dateArr.push(tools.DateFormat(now, 'MM.dd'))
        now.setDate(now.getDate() + 1);
        count++;
      }

      return dateArr
    },
    ZL13100011(result) {
      let vm = this;
      vm.HSProfite = [0];
      if (result.error == '1') {
        vm.status = 2
      } else {
        let data = result.data;
        let bigdata = JSON.parse(data).body[0].bigdata;
        let specData = JSON.parse(bigdata).hits.hits;
        specData.length == 0 ? vm.status = 1 : vm.deawMyProfite(specData)
      }
    },
    deawMyProfite(specData) {
      let vm = this;
      specData.forEach(function(item, i) {
        let hs300_total_profit_rate = (item._source.hs300_total_profit_rate * 100).toFixed(2)
        vm.HSProfite.push(hs300_total_profit_rate)
      });
      vm.$nextTick(() => {
        if (!vm.proAbilityCharts) {
          vm.proAbilityCharts = echarts.init(vm.$refs.proAbilityChart);
          vm.proAbilityCharts.setOption(proAbility)
        }
        vm.proAbilityCharts.setOption({
          xAxis: {
            data: vm.tradedate,
          },
          series: [{
              data: vm.myProfite,
            },
            {
              data: vm.HSProfite,
            }
          ]
        })
      })
    },
    ZL13100009(result) {
      let vm = this;
      if (result.error == '1') {
        vm.status = 2
      } else {
        let data = result.data;
        let bigdata = JSON.parse(data).body[0].bigdata;
        let specData = JSON.parse(bigdata).hits.hits[0];
        let empty = JSON.parse(bigdata).hits.hits;
        if (empty.length == 0) {
          vm.status = 1
        } else {
          vm.proData = specData._source;
          vm.proData.total_profit_total > 0 ? vm.textColor = 'proMoney' : vm.textColor = 'lossMoney';
          switch (true) {
            case vm.proData.profit_index >= 80:
              vm.proData.text = '收益能力优异，做的不错哦！'
              break;
            case vm.proData.profit_index >= 60:
              vm.proData.text = '收益能力表现良好,还需努力呀！'
              break;
            case vm.proData.profit_index >= 0:
              vm.proData.text = '收益能力还有很大进步空间呢！'
              break;
          }
        }
      }
    }
  }
}
</script>
<style scoped>
.evalute {
  font-size: 24px;
  margin-bottom: 80px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}

.evalute div {
  display: table-cell;
  vertical-align: middle;
}

.evalute .img {
  width: 40px;
  height: 40px;
  margin-right: 20px;
}

.evalute .img img {
  width: 100%;
  height: 100%;
}

.evalute .des {
  display: inline-block;
}

.evalute .des i {
  color: #E31A2E;
}

.buyDis {
  font-size: 24px;
  text-align: center;
  margin-top: 60px;
  color: #999;
}

.buyDis img {
  display: inline-block;
  width: 26px;
  height: 26px;
  vertical-align: middle;
  margin-right: 10px;
}

.proMoney {
  color: #e31a2e;
  margin: 20px 0 20px 0;
}

.lossMoney {
  color: #1aae52;
  margin: 20px 0 20px 0;
}

.rateDetail span {
  margin-top: 20px;
  font-size: 44px;
  height: 50px;
  text-align: center;
}

.tSmall {
  margin-top: 20px;
  height: 30px;
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

.tSmall img {
  height: 28px;
}

.tSmall .textSmall {
  margin: 0 10px;
  font-size: 20px;
  line-height: 30px
}

.bottom {
  margin-bottom: 0;
}

.win i {
  color: #E31A2E;
}
.blank {
  height: 14px;
  margin-top: 20px;
  background-color: #f6f6f6;
}
</style>
